<template>
	<view>
		<image src="/static/common/bg1.png" class="pagebg1" mode=""></image>
		<u-navbar :safeAreaInsetTop="true" :autoBack="true" :bgColor="'rgba(255,255,255,'+opc+')'" placeholder title="支出记录">
		<!-- 	<view class="searchbox" slot="center">
				<image src="" class="searchbox__icon" mode=""></image>
				<input type="text" placeholder="搜索关键词" class="searchbox__inp" />
				<view class="searchbox__btn">
					搜索
				</view>
			</view> -->
		</u-navbar>
		<view class="pagecon">
			<view class="tab">
				<view class="tab__item" v-for="(item,index) in tablist" :key="index" :class="curt==index?'ac':''"
					@click="curt=index">
					{{item.name}}
				</view>
			</view>
			<view class="con" style="padding: 0 30rpx;"
				:style="{height: 'calc(100vh - 44px - 132rpx - '+$u.addUnit($u.sys().statusBarHeight,'px')+')'}">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="box">
						<view class="u-flex u-flex-y-center u-flex-between">
							<view class="">
								<view class="box__title">
									账号余额(元）<u-icon name="eye-fill" color="#af9592" size="36rpx"></u-icon>
								</view>
								<view class="box__num">
									1000.00
								</view>
							</view>
							<u-button :customStyle="{width:'146rpx',height:'68rpx',padding:0,fontSie:'36rpx',margin:'0',}"
								shape='circle' color="#E3432D" text="充值" @click="navto('/pages/personal/recharge')"></u-button>
						</view>
						<view class="u-flex u-flex-y-center">
							<view class="box__l">
								<view class="box__l__text">
									支付总额
								</view>
								<view class="box__l__num">
									100.00
								</view>
							</view>
							<view class="box__l">
								<view class="box__l__text">
									收益总额
								</view>
								<view class="box__l__num">
									100.00
								</view>
							</view>
						</view>
						<view class="u-flex u-flex-y-center u-flex-between" style="margin-top: 40rpx;">
							<view class="box__btn" @click="navto('/pages/personal/withdraw')">
								<image src="/static/personal/tx.png" class="box__btn__icon" mode=""></image>
								余额提现
							</view>
							<view class="box__btn">
								<image src="/static/personal/sy.png" class="box__btn__icon" mode=""></image>
								收益规则
							</view>
						</view>
					</view>
					<view class="list">
						<view class="list__title">
							收支明细
						</view>
						<view class="con__a__item" v-for="(item,index) in 1" :key="index">
							<image src="/static/personal/qb.png" class="con__a__item__icon" mode=""></image>
							<view class="con__a__item__center">
								<view class="u-flex u-flex-y-center u-flex-between">
									<view class="con__a__item__name">
										邀请时光匆匆用户
									</view>
									<view class="con__a__item__num">
										+20
									</view>
								</view>
								<view class="con__a__item__time">
									09-18 18:24    
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opc: 0,
				tablist: [{
						name: '全部'
					},
					{
						name: '支出'
					},
					{
						name: '充值'
					},
					{
						name: '提现'
					},
					{
						name: '收益'
					},
				],
				curt: 0
			};
		}
	}
</script>

<style lang="scss">
	.searchbox {
		width: 655rpx;
		height: 73rpx;
		background: #FEFEFE;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		display: flex;
		align-items: center;
		margin-left: 45rpx;

		&__icon {
			width: 32rpx;
			height: 32rpx;
			margin: 0 13rpx 0;
		}

		&__inp {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333;
			flex: 1;
		}

		&__btn {
			width: 118rpx;
			height: 64rpx;
			background: #E3432D;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFD;
			margin-right: 4rpx;
		}
	}

	.tab {
		height: 132rpx;
		display: flex;
		align-items: center;

		&__item {
			width: 116rpx;
			height: 55rpx;
			background: #FFFFFF;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 25rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #2B2B2B;
			line-height: 36rpx;
		}

		.ac {
			color: #FF5D33;
			font-weight: 800;
		}
	}

	.box {
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		padding: 44rpx 40rpx 32rpx;

		&__title {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #562620;
			line-height: 26rpx;
			display: flex;
			align-items: center;
		}
		&__num{
			font-family: DINNextLTPro;
			font-weight: 500;
			font-size: 68rpx;
			color: #E3432D;
			line-height: 68rpx;
			margin-top: 30rpx;
		}
		&__l{
			width: 50%;
			margin-top: 40rpx;
			&__text{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #562620;
				line-height: 24rpx;
			}
			&__num{
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 36rpx;
				color: #E3432D;
				line-height: 36rpx;
				margin-top: 20rpx;
			}
		}
		&__btn{
			width: 267rpx;
			height: 88rpx;
			background: rgba(255, 93, 51, .08);
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 30rpx;
			color: #562620;
			line-height: 30rpx;
			&__icon{
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}
	.list{
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding-left:30rpx;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		&__title {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #010101;
			line-height: 30rpx;
			padding-top: 48rpx;
		}
		
	}
	.con{
		&__a{
			&__item {
				display: flex;
				align-items: center;
			
				&__icon {
					width: 68rpx;
					height: 68rpx;
				}
			
				&__name {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					line-height: 28rpx;
				}
			
				&__num {
					font-family: DINNextLTPro;
					font-weight: 400;
					font-size: 32rpx;
					color: #FF5152;
					line-height: 32rpx;
					margin-top: 10rpx;
				}
			
				.jian {
					color: #000000;
				}
			
				&__time {
					font-family: DINNextLTPro;
					font-weight: 500;
					font-size: 25rpx;
					color: #929292;
					line-height: 25rpx;
					margin-top: 10rpx;
				}
			
				&__center {
					flex: 1;
					border-bottom: 1rpx solid #E9EAEC;
					padding: 36rpx 21rpx;
				}
				
			}
		}
		
	}
</style>